<template>
	<view class="page-content-box">
		<view class="my-top-box">
			<view class="my-top-content">
				<view class="img-box">
					<image v-if="userInfo.avatarUrl&&hasLogin" style="width: 120rpx; height: 120rpx;" mode="aspectFit" :src="userInfo.avatarUrl"></image>
					<image v-else style="width: 120rpx; height: 120rpx;" mode="aspectFit" src="https://parking.htfa.cn/parking/images/touxiang.png"></image>
				</view>
				<view v-if="hasLogin" class="name-box">
					<!--  @click="changeName" -->
					<!-- 修改密码 -->
					<text>{{userInfo.userName}}</text>
					<image style="width: 40rpx; height: 40rpx;margin-left: 6rpx; vertical-align: -9rpx;" mode="aspectFit" src="https://parking.htfa.cn/parking/images/xiugai1.png" @click="changeName"></image>
				</view>
				
				<view v-else class="name-box" @click="$util.goTo('/pages/hrlogin/hrlogin')">
					<text>请先登录</text>
				</view>
				
			</view>
			<!-- <view class="scan-box" @click="scanCompany">
				<image style="width: 40rpx; height: 40rpx;" mode="aspectFit" src="../../static/xiugai.png"></image>改密码
			</view> -->
		</view>
		<view class="my-center-box flex-block-row">
			<view class="my-center-item" v-for="(item,index) in menu_list" :key="index">
				<navigator :url="item.url" hover-class="none">
					<view class="img-box">
						<image style="width: 64rpx; height: 64rpx;" mode="aspectFit" :src="item.image_url"></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</navigator>
			</view>
		</view>
		<view class="other-menu-box">
			<view class="other-menu-item" v-for="(item,index) in other_menu" :key="index">
				<button v-if="item.id==2" plain="true" open-type='contact' class="other-menu other-button flex-block-row">
					<view class="img-box">
						<image style="width: 30rpx; height: 30rpx;" mode="aspectFit" :src="item.image_url"></image>
					</view>
					<view class="name">{{item.name}}</view>
					<view class="go-right">
						<image style="width: 12rpx; height: 24rpx;" mode="aspectFit" src="https://parking.htfa.cn/parking/images/more.png"></image>
					</view>
				</button>
				<view v-else @click="goToPage(item.url,item.id)" class="other-menu flex-block-row">
					<view class="img-box">
						<image style="width: 30rpx; height: 30rpx;" mode="aspectFit" :src="item.image_url"></image>
					</view>
					<view class="name">{{item.name}}</view>
					<view class="go-right">
						<image style="width: 12rpx; height: 24rpx;" mode="aspectFit" src="https://parking.htfa.cn/parking/images/more.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="dialog-center-bg" v-if="showDialog" @click="showDialog=false"></view>
		<view class="dialog-center-content" v-if="showDialog">
			<view class="dialog-center-title">修改用户密码</view>
			<!-- <view class="form-box">
				<view class="input-box">
					<input class="uni-input input-content" placeholder-class="input-place" maxlength="30" name="input" placeholder="请输入用户名" @input="onInputName" :value="form.nickName"/>
				</view>
			</view> -->
			<view class="form-box">
				<view class="input-box">
					<input class="uni-input input-content" placeholder-class="input-place" maxlength="30" name="input" placeholder="请输入新密码" @input="onInputPwd" :value="form.newPassword"/>
				</view>
			</view>
			<view class="form-box">
				<view class="input-box">
					<input class="uni-input input-content" placeholder-class="input-place" maxlength="30" name="input" placeholder="请再次确认新密码" @input="onInputConPwd" :value="form.conNewPassword"/>
				</view>
			</view>
			<view class="btn-box">
				<button class="dlg-btn close-btn" type="primary" @click="showDialog=false">取消</button>
				<button class="dlg-btn submit-btn" type="primary" style="background-color: #129de8;" @click="confirmName">提交</button>
			</view>
		</view>
		<view v-if="hasLogin" class="login-btn-box">
			<button type="default" class="login-btn" @click="logout">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasLogin:false,
				userInfo:{},
				company_name:'',
				form:{
					newPassword:'',
					conNewPassword:''
				},
				showDialog:false,
				// menu_list:[
				// 	{
				// 		image_url:'../../static/myself1.png',
				// 		name:'订单列表',
				// 		url:'/pages/orderlist/orderlist'
				// 	},
				// 	/* {
				// 		image_url:'../../static/myself2.png',
				// 		name:'营养师',
				// 		url:'/pages/dietitian/dietitian'
				// 	}, */
				// 	{
				// 		image_url:'../../static/myself2.png',
				// 		name:'我的余额',
				// 		url:'/pages/balance/balance'
				// 	},
				// 	{
				// 		image_url:'../../static/myself3.png',
				// 		name:'我的收藏',
				// 		url:'/pages/collect/collect',
				// 		//url:'/pages/paysuccess/paysuccess',
				// 	}
				// ],
				other_menu:[
					/* {
						image_url:'../../static/my_other1.png',
						name:'我的评价',
						url:'/pages/evallist/evallist',
						id:1
					}, */
					{
						image_url:'https://parking.htfa.cn/parking/images/my_other5.png',
						name:'我的延期记录',
						url:'/pages/orderlist/orderlist',
						id:5
					},
					{
						image_url:'https://parking.htfa.cn/parking/images/my_other5.png',
						name:'我的报修记录',
						url:'/pages/maintenanceList/maintenanceList',
						id:6
					},
					{
						image_url:'https://parking.htfa.cn/parking/images/my_other5.png',
						name:'我的反馈记录',
						url:'/pages/feedbackList/feedbackList',
						id:7
					},
					{
						image_url:'https://parking.htfa.cn/parking/images/my_other4.png',
						name:'个人信息',
						url:'/pages/personal/personal',
						id:4
					},
					
					// {
					// 	image_url:'../../static/my_other6.png',
					// 	name:'地址管理',
					// 	url:'/pages/addrmanage/addrmanage?isChoose='+false,
					// 	id:6
					// },
					// {
					// 	image_url:'../../static/my_other1.png',
					// 	name:'意见反馈',
					// 	url:'/pages/feedback/feedback',
					// 	id:1
					// },
					// {
					// 	image_url:'../../static/my_other2.png',
					// 	name:'联系客服',
					// 	id:2
					// },
					// {
					// 	image_url:'../../static/my_other3.png',
					// 	name:'管理',
					// 	url:'/pages/manage/manage',
					// 	id:3
					// }
				]
			}
		},
		onLoad() {
			var _this = this;
			uni.setNavigationBarColor({
			    frontColor: '#000000',
			    backgroundColor: '#70dbff'
			})
		},
		onShow() {
			var _this = this;
			if(uni.getStorageSync("userInfo")){
				console.log(uni.getStorageSync("userInfo"),"用户信息")
				this.userInfo = uni.getStorageSync("userInfo");
				//this.form.nickName = this.userInfo.userName;
			}
			if(uni.getStorageSync("token")&&uni.getStorageSync("userInfo")) {
				_this.hasLogin = true;
				_this.getInitData();
			}else{
				_this.hasLogin = false;
			}
			if(uni.getStorageSync("companyName")){
				this.company_name = uni.getStorageSync("companyName");
			}
		},
		methods: {
			getInitData(){
				var _this = this;
				this.$client.get('/api/sys/user/getModelBo', {id:this.userInfo.icode}, function(res,message){
					
					uni.setStorageSync('userInfo', res);
					_this.userInfo=res
				},function(res){
					
				},true);
			},
			changeName(){
				this.showDialog = true;
			},
			onInputPwd(e){
				this.form.newPassword = e.target.value
			},
			onInputConPwd(e){
				this.form.conNewPassword = e.target.value
			},
			confirmName(){
				var _this = this;
				if(this.form.newPassword==''){
					this.$util.showToast({title:'请填写新的密码！'});
					return;
				}
				if(this.form.conNewPassword==''){
					this.$util.showToast({title:'请确认新的密码！'});
					return;
				}
				if(this.form.conNewPassword !=this.form.newPassword){
					this.$util.showToast({title:'新密码与确认密码不一致'});
					return;
				}
				var params = {
					newPassword:this.form.newPassword,
					
				}
				uni.showLoading({
				    title: '加载中...'
				});
				this.$client.post('/api/sys/user/updatePasswordForCurrentUser', params, function(res,message){
					uni.hideLoading();
					_this.$util.showToast({title:message});
					_this.showDialog = false;
					_this.form.conNewPassword=''
					_this.form.newPassword=''
				},function(res){
					uni.hideLoading();
					if(res){
						_this.$util.showToast({title:res});
					}
				},true);
			},
			goToPage(url,id){
				
					if(!(uni.getStorageSync("token"))) {
						uni.navigateTo({
						    url: "/pages/hrlogin/hrlogin"
						});
						return;
					}
				
				uni.navigateTo({
				    url: url
				});
			},
			//退出登录
			logout(){
				var _this = this;
				uni.showLoading({
				    title: '加载中...'
				});
				this.$client.post('/api/sys/user/logout', {}, function(res,message){
					uni.hideLoading();
					_this.$util.showToast({title:message});
					uni.setStorageSync('token', '');
					uni.setStorageSync('userInfo', '');
					setTimeout(()=>{
						uni.navigateTo({
						    url: "/pages/hrlogin/hrlogin"
						});
					})
				},function(res){
					
				},true);
			}
		}
	}
</script>

<style>
	.my-top-box{
		width:100%;
		height:300rpx;
		background:linear-gradient(180deg,#70dbff,#70dbff);
		border-radius:0 0 0 80rpx;
		position: relative;
	}
	.my-top-box::before{
		content: "";
		height:300rpx;
		width: 100%;
		display: block;
		background:url('https://parking.htfa.cn/parking/images/bg.png') 0 0 no-repeat;
		-webkit-background-size: contain;
		background-size: contain;
		position: absolute;
		left: 0;
		top: 0;
	}
	.my-top-content{
		text-align: center;
		padding-top: 40rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}
	.my-top-content .img-box{
		border-radius: 50%;
		overflow: hidden;
	}
	.my-top-content .img-box image{
		border-radius: 50%;
	}
	.my-top-content .name-box{
		font-size:28rpx;
		font-weight:bold;
		color:rgba(255,255,255,1);
		line-height: 48rpx;
	}
	.my-top-content .company-box{
		font-size:24rpx;
		color:rgba(255,255,255,1);
		line-height: 40rpx;
	}
	.scan-box{
		width: 130rpx;
		height: 40rpx;
		position: absolute;
		left: auto;
		right: 40rpx;
		top: 40rpx;
		z-index: 10;
		color: #fff;
	}
	.my-center-box{
		justify-content: space-around;
	}
	.my-center-box .my-center-item{
		flex: 1;
		padding: 36rpx 0;
	}
	.my-center-box .my-center-item .img-box{
		text-align: center;
		height: 80rpx;
	}
	.my-center-box .my-center-item .name{
		line-height: 40rpx;
		font-size:24rpx;
		color:rgba(22,22,22,1);
		text-align: center;
	}
	.other-menu-box{
		width:calc(100% - 40rpx);
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		margin: 0 20rpx;
		margin-top: 40rpx;
	}
	.other-menu-box .other-menu-item{
		height: 100rpx;
		border-bottom:rgba(238,238,238,1);
	}
	.other-menu-box .other-menu-item .other-menu{
		width: 100%;
		height: 100rpx;
	}
	.other-menu-box .other-menu-item .other-button{
		padding: 0;
		text-align: left;
		line-height: 100rpx;
		border: none;
	}
	.other-menu-item .img-box{
		width: 70rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.other-menu-item .img-box image{
		vertical-align: middle;
	}
	.other-menu-item .name{
		width: 588rpx;
	}
	.other-menu-item .go-right{
		width: 52rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.login-btn-box{
		text-align: center;
	}
	.login-btn-box .login-btn{
		margin-top: 40rpx;
		width:700rpx;
		height:80rpx;
		background:#74c8ff;
		border:2rpx solid #74c8ff;
		border-radius:40rpx;
		line-height: 76rpx;
		padding: 0;
		font-size:28rpx;
		color:rgba(255,255,255,1);
	}
</style>
